div.code-editor#code-editor
  div.assets-left
    div.assets-bar#source-asset-bar
      div.create-asset-button <i class="fa fa-plus-square"></i> #{translator.get("Source")}
      i.fa.fa-folder-plus.create-folder-button(title=translator.get("New Folder"))
      span.language.microscript microscript

    div.create-asset-button#create-source-button(style="display:none") <i class="fa fa-plus-square"></i> #{translator.get("Add Source")}

    div.assetlist#sourcelist
      div.asset-list#source-list

    div#manage-libs-button
      i.fas.fa-file-import
      span #{translator.get("Import Libraries")}

  div.horizontal-splitbar#code-editor-splitbar

  div.code-right#code-main
    div.code-toolbar.assetinfo#code-toolbar
      input(type="text" value="")#source-name
      div.validate-button-container#source-name-button
        div.validate-button <i class="fa fa-check"></i> #{translator.get("Apply")}

      div#delete-source.delete(title=translator.get("Delete Source"))
        i.fa.fa-trash

      div.code-tools
        div.buttons
          div#code-font-minus(title="Decrease font size") <i class="fas fa-long-arrow-alt-down"></i> A
          div#code-font-plus(title="Increase font size") <i class="fas fa-long-arrow-alt-up"></i> A
          div#code-search.selected(title="Search in code")
            i.fas.fa-search

        div.value-tool-button#color-value-tool-button
          span CTRL
          i.fa.fa-palette

        div.value-tool-button#number-value-tool-button
          span CTRL
          div.slider-track
          div.slider-cursor

    div.editor-locked#editor-locked
    div.editor-view#editor-view
    div.help-window#help-window
      div#help-window-content
        div.left-side
          i(class="fa fa-question")
        div.content

    div.lib-manager-container
      include libmanager.pug

div.code-splitbar#code-splitbar

div.runtime-container#runtime-container
  div.runtime#runtime.server-open
    div.runbar#runbar
      span Run
      div.buttons
        div#run-button(title=translator.get("Run project"))
          i.fas.fa-play
        div#pause-button.selected(title=translator.get("Pause execution"))
          i.fas.fa-pause
        div#step-forward-button(title=translator.get("One Step Forward") style="display: none")
          i.fas.fa-step-forward
        div#reload-button.selected(title=translator.get("Restart project"))
          i.fa.fa-redo
        div#detach-button(title=translator.get("Detach run window"))
          i.fas.fa-window-restore
        div#take-picture-button(title=translator.get("Take a picture"))
          i.fas.fa-camera
        div#qrcode-button(title=translator.get("Project QR Code"))
          i.fas.fa-qrcode

      a#run-link(target="_blank")

    div.devicecontainer
      div#device

      div#ruler
        canvas#ruler-canvas

    #serverbar
      i.fas.fa-server 
      span Server
      #start-server-button.button
        i.fas.fa-arrow-down
        span #{translator.get("Start")}
      #start-server-tab-button.button
        i.fas.fa-external-link-alt
        span #{translator.get("Start")}
      #stop-server-button.button
        i.fas.fa-stop
        span #{translator.get("Stop")}
      i.status
      span.status-info #{translator.get("Server OFF")}
      

  div.runtime-splitbar#runtime-splitbar

  div.runtime-terminal#runtime-terminal

    #runtime-server-view 
    #runtime-server-splitbar
    #runtime-console-view
      div#debug-timemachine-bar
        i.fa.fa-history
        span #{translator.get("Time Machine")}

        div#debug-timemachine-recording
          i#debug-timemachine-record.rec.fas.fa-circle(title=translator.get("Record"))
          div#debug-timemachine-recorder-trail
            div#debug-timemachine-recorder-head

        div#debug-timemachine-buttons
          i#debug-timemachine-backward.fas.fa-backward(title=translator.get("Backward"))
          i#debug-timemachine-step-backward.fas.fa-step-backward(title=translator.get("Step Backward"))
          i#debug-timemachine-loop.fas.fa-retweet(title=translator.get("Loop"))
          i#debug-timemachine-step-forward.fas.fa-step-forward(title=translator.get("Step Forward"))
          i#debug-timemachine-forward.fas.fa-forward(title=translator.get("Forward"))

      div#terminal-debug-container
        div#terminal
          div#terminal-toolbar
            span Console
            div.buttons
              div#clear-button(title="Clear console")
                i.fa.fa-trash-alt
              div#console-options-button(title="Console options")
                i.fa.fa-cogs

            i#open-timemachine-button.fa.fa-history(title=translator.get("Time Machine"))
            i#open-debugger-button.fa.fa-bug(title=translator.get("Debug Tools"))

          div#terminal-view
            div#terminal-lines
          div#terminal-input-line
            div#terminal-input-gt
              i.fa.fa-angle-right
            div#terminal-input-container
              input#terminal-input(autocomplete="off" name="terminalinput")

          div#console-options
            div
              input#console-options-warning-undefined(type="checkbox")
              label(for="console-options-warning-undefined") #{translator.get("Display warning when using an undefined variable")}
              br
              input#console-options-warning-nonfunction(type="checkbox")
              label(for="console-options-warning-nonfunction") #{translator.get("Display warning when calling something that isn't a function")}
              br
              input#console-options-warning-assign(type="checkbox")
              label(for="console-options-warning-assign") #{translator.get("Display warning when setting property on an undefined variable")}
              br
              input#console-options-warning-condition(type="checkbox")
              label(for="console-options-warning-condition") #{translator.get("Display warning when assigning to a variable in a condition")}

        div#debug-splitbar

        div#debug-main-view
          div#debug-main-toolbar
            div#debug-tab-watch <i class="fa fa-eye"></i> #{translator.get("Watch")}
            div#debug-tab-time-machine <i class="fas fa-history"></i> #{translator.get("Time Machine")}

          div#debug-watch-view
            div#debug-watch-bar
              i.fa.fa-eye
              span #{translator.get("Watch")}
              i.fa.fa-filter
              input#debug-watch-filter
              i#debug-watch-type-number.fas.fa-calculator.type.active(title=translator.get("Show Numbers"))
              i#debug-watch-type-string.fas.fa-quote-left.type.active(title=translator.get("Show Strings"))
              i#debug-watch-type-list.fas.fa-list.type.active(title=translator.get("Show Lists"))
              i#debug-watch-type-object.fas.fa-boxes.type.active(title=translator.get("Show Objects"))
              i#debug-watch-type-function.fas.fa-microchip.type.active(title=translator.get("Show Functions"))

            div#debug-watch-content
